<template>
  <view >
    <view class="choose-box" v-if="JSON.stringify(address)==='{}'">
      <button type="primary" size="mini" @click="chooseAddress">请选择收货地址+</button>
    </view>
    <view class="info-box" @click="chooseAddress" v-if="JSON.stringify(address)!=='{}'">
      <view class="person">
        <txet>收货人:&nbsp;&nbsp;{{address.userName}}</txet>
        <view class="phone">
          <text>电话:&nbsp;&nbsp;{{address.telNumber}}</text>
          <uni-icons type="arrowright"></uni-icons>
        </view>
      </view>
      <view class="row2">
        <txet class="row2-left">收获地址:</txet>
        <txet class="row2-right">{{addressStr}}</txet>
      </view>
    </view>
   
    <!-- 底部分割线 -->
    <image src="../../static/cart_border@2x.png" class="boder-image"></image>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'Vuex'
  export default {
    name: "my-address",
    data() {
      return {
      };
    },
    computed: {
      ...mapState('m_user', ['address']),
     ...mapGetters('m_user', ['addressStr'])
    },
    methods: {
      ...mapMutations('m_user', ['updateAddress']),
      async chooseAddress() {
        const res = await uni.chooseAddress()
        this.updateAddress(res)
      }
    }
  }
</script>

<style lang="scss">
  .boder-image {
    display: block;
    height: 5px;
    width: 100%;
  }

  .choose-box {
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .info-box {
    padding: 5px 3px;
    .person {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 3px 0px;

      text {
        padding-right: 3px;
      }
    }

    .row2 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 10px 0px;

      .row2-left {
        white-space: nowrap;
        margin-right: 10px;
      }

      .row2-right {
        font-size: 14px;

      }
    }
  }
</style>